<template>
  <el-tabs v-model="activeName">
    <el-tab-pane label="xml" name="xml">
      <div style="height:440px;overflow-y:scroll;">
        <el-input readonly v-model="xml" :rows="20" type="textarea"></el-input>
      </div>
    </el-tab-pane>
    <el-tab-pane label="流程图" name="diagram">
      <SnakerFlowDesigner class="m-snaker-flow-designer" :viewer="true" v-model="flowData" />
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import { getXml } from '@/api/wf/wf.process.service.js'
export default {
  name: 'WfProcessDetails',
  props: {
    id: {
      type: [String, Number],
      default: undefined
    }
  },
  data() {
    return {
      xml: '',
      activeName: 'xml',
      flowData: {}
    }
  },
  mounted() {
    getXml({
      id: this.id
    }).then(res => {
      if (res.code === 0) {
        this.xml = res.data
        this.flowData = res.data
      }
    })
  },
  methods: {
    resetFields() {
      this.xml = ''
    }
  }
}
</script>
<style scoped>
.m-snaker-flow-designer {
  height:440px
}
.m-snaker-flow-designer >>> #LF-view {
  width: 100%;
  height: 100%;
  margin-left: 0;
}
</style>
